@use '../defs';

.globalHeader {
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	background-color: var(--bg-color-translucent);
	box-shadow: 0 2px 4px rgba(black, 0.05);
	color: inherit;
	height: defs.$global-header-height;
	left: 0;
	line-height: defs.$global-header-height;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	z-index: defs.$z-index-global-header;

	&_inner {
		@include defs.responsiveContainer();

		box-sizing: border-box;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
	&_logo {
		display: inline-block;
	}
	&_spMenuButton {
		left: 0;
		position: absolute;
		top: 0;
	}
}

.spMenuButton {
	align-items: center;
	color: inherit;
	display: flex;
	height: defs.$global-header-height;
	justify-content: center;
	width: defs.$global-header-height;
}
